<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加银行账户</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-bank-account.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">添加银行账户</h1>
                <button onclick="showHelp()" class="text-white hover:opacity-80">
                    <i class="fas fa-question-circle text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Progress Steps -->
        <div class="bg-white border-b border-gray-200 px-4 py-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white text-sm font-medium mr-2">
                        1
                    </div>
                    <span class="text-sm font-medium text-orange-600">填写银行信息</span>
                </div>
                <div class="flex-1 mx-4 h-1 bg-gray-200 rounded">
                    <div class="h-1 bg-orange-500 rounded" style="width: 33%"></div>
                </div>
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 text-sm font-medium mr-2">
                        2
                    </div>
                    <span class="text-sm text-gray-500">验证身份</span>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <form id="addBankForm">
                <!-- Bank Selection -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <i class="fas fa-university text-orange-600 mr-2"></i>
                        选择银行
                    </h3>
                    
                    <div class="grid grid-cols-3 gap-3 mb-4">
                        <button type="button" onclick="selectBank('icbc')" class="bank-option bg-white rounded-lg border-2 border-gray-200 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-university text-red-600"></i>
                            </div>
                            <p class="text-xs font-medium">工商银行</p>
                        </button>
                        
                        <button type="button" onclick="selectBank('ccb')" class="bank-option bg-white rounded-lg border-2 border-gray-200 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-university text-blue-600"></i>
                            </div>
                            <p class="text-xs font-medium">建设银行</p>
                        </button>
                        
                        <button type="button" onclick="selectBank('abc')" class="bank-option bg-white rounded-lg border-2 border-gray-200 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-university text-green-600"></i>
                            </div>
                            <p class="text-xs font-medium">农业银行</p>
                        </button>
                        
                        <button type="button" onclick="selectBank('boc')" class="bank-option bg-white rounded-lg border-2 border-gray-200 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-university text-red-600"></i>
                            </div>
                            <p class="text-xs font-medium">中国银行</p>
                        </button>
                        
                        <button type="button" onclick="selectBank('cmb')" class="bank-option bg-white rounded-lg border-2 border-gray-200 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-university text-purple-600"></i>
                            </div>
                            <p class="text-xs font-medium">招商银行</p>
                        </button>
                        
                        <button type="button" onclick="showMoreBanks()" class="bank-option bg-white rounded-lg border-2 border-dashed border-gray-300 p-3 text-center hover:border-orange-400 transition-all">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i class="fas fa-plus text-gray-600"></i>
                            </div>
                            <p class="text-xs font-medium text-gray-600">更多银行</p>
                        </button>
                    </div>
                    
                    <p class="text-xs text-gray-500">已选择: <span id="selectedBank">请选择银行</span></p>
                </div>

                <!-- Bank Card Information -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <i class="fas fa-credit-card text-orange-600 mr-2"></i>
                        银行卡信息
                    </h3>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                银行卡号 *
                            </label>
                            <input type="text" id="cardNumber" placeholder="请输入银行卡号" maxlength="19" required
                                   oninput="formatCardNumber(this)"
                                   class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent text-lg font-mono">
                            <p class="text-xs text-gray-500 mt-1">请输入16-19位银行卡号</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                持卡人姓名 *
                            </label>
                            <input type="text" id="cardHolder" placeholder="请输入持卡人姓名" required
                                   class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                            <p class="text-xs text-gray-500 mt-1">必须与实名认证姓名一致</p>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    开户省份 *
                                </label>
                                <select id="province" required onchange="loadCities(this.value)"
                                        class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    <option value="">请选择</option>
                                    <option value="beijing">北京市</option>
                                    <option value="shanghai">上海市</option>
                                    <option value="guangdong">广东省</option>
                                    <option value="zhejiang">浙江省</option>
                                    <option value="jiangsu">江苏省</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    开户城市 *
                                </label>
                                <select id="city" required
                                        class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                开户支行 *
                            </label>
                            <input type="text" id="branch" placeholder="请输入开户支行名称" required
                                   class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                            <p class="text-xs text-gray-500 mt-1">如：XX银行XX支行</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                预留手机号 *
                            </label>
                            <input type="tel" id="phone" placeholder="请输入银行预留手机号" maxlength="11" required
                                   oninput="formatPhone(this)"
                                   class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                            <p class="text-xs text-gray-500 mt-1">用于接收银行验证短信</p>
                        </div>
                    </div>
                </div>

                <!-- Agreement -->
                <div class="p-4">
                    <div class="bg-yellow-50 rounded-lg border border-yellow-200 p-3 mb-4">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-yellow-600 mr-2 mt-1 text-sm"></i>
                            <div class="text-xs text-yellow-800">
                                <p class="font-medium mb-1">温馨提示</p>
                                <ul class="space-y-1 text-yellow-700">
                                    <li>• 仅支持本人名下储蓄卡，不支持信用卡</li>
                                    <li>• 银行信息将用于提现转账，请确保准确无误</li>
                                    <li>• 添加成功后可随时解绑或更换</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <label class="flex items-start text-sm">
                        <input type="checkbox" id="agreement" required class="mt-1 mr-2">
                        <span class="text-gray-700">
                            我已阅读并同意
                            <button type="button" onclick="showAgreement()" class="text-orange-600 hover:text-orange-700">《银行卡绑定协议》</button>
                            和
                            <button type="button" onclick="showPrivacy()" class="text-orange-600 hover:text-orange-700">《隐私政策》</button>
                        </span>
                    </label>
                </div>
            </form>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <button onclick="submitBankInfo()" class="w-full bg-gradient-to-r from-orange-500 to-amber-500 text-white font-semibold py-3 rounded-lg shadow-sm hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                下一步：身份验证
            </button>
        </div>
    </div>

    <script>
        let selectedBankCode = '';
        let selectedBankName = '';

        // Bank selection
        function selectBank(bankCode) {
            const bankNames = {
                'icbc': '中国工商银行',
                'ccb': '中国建设银行',
                'abc': '中国农业银行',
                'boc': '中国银行',
                'cmb': '招商银行'
            };

            // Reset all bank options
            document.querySelectorAll('.bank-option').forEach(option => {
                option.classList.remove('border-orange-500', 'bg-orange-50');
                option.classList.add('border-gray-200');
            });

            // Highlight selected bank
            event.currentTarget.classList.remove('border-gray-200');
            event.currentTarget.classList.add('border-orange-500', 'bg-orange-50');

            selectedBankCode = bankCode;
            selectedBankName = bankNames[bankCode];
            document.getElementById('selectedBank').textContent = selectedBankName;

            showToast(`已选择${selectedBankName}`);
        }

        function showMoreBanks() {
            const moreBanks = ['交通银行', '中信银行', '光大银行', '华夏银行', '民生银行', '浦发银行', '兴业银行', '平安银行'];
            const bankList = moreBanks.join('\n');
            alert(`更多银行选择：\n\n${bankList}\n\n如需添加其他银行，请联系客服协助处理。`);
        }

        // Form formatting
        function formatCardNumber(input) {
            let value = input.value.replace(/\D/g, '');
            value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
            input.value = value;
        }

        function formatPhone(input) {
            let value = input.value.replace(/\D/g, '');
            if (value.length > 11) {
                value = value.substring(0, 11);
            }
            input.value = value;
        }

        function loadCities(province) {
            const cities = {
                'beijing': ['北京市'],
                'shanghai': ['上海市'],
                'guangdong': ['广州市', '深圳市', '东莞市', '佛山市'],
                'zhejiang': ['杭州市', '宁波市', '温州市', '嘉兴市'],
                'jiangsu': ['南京市', '苏州市', '无锡市', '常州市']
            };

            const citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择</option>';

            if (cities[province]) {
                cities[province].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        }

        // Form submission
        function submitBankInfo() {
            const form = document.getElementById('addBankForm');
            
            // Validation
            if (!selectedBankCode) {
                showToast('请选择银行');
                return;
            }

            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }

            if (!document.getElementById('agreement').checked) {
                showToast('请阅读并同意相关协议');
                return;
            }

            // Collect form data
            const formData = {
                bankCode: selectedBankCode,
                bankName: selectedBankName,
                cardNumber: document.getElementById('cardNumber').value.replace(/\s/g, ''),
                cardHolder: document.getElementById('cardHolder').value,
                province: document.getElementById('province').value,
                city: document.getElementById('city').value,
                branch: document.getElementById('branch').value,
                phone: document.getElementById('phone').value
            };

            // Basic validation
            if (formData.cardNumber.length < 16) {
                showToast('银行卡号长度不正确');
                return;
            }

            if (formData.phone.length !== 11) {
                showToast('手机号格式不正确');
                return;
            }

            showToast('正在验证银行信息...');
            
            // Simulate API call
            setTimeout(() => {
                showToast('银行信息验证成功，进入身份验证');
                // 实际应用中会跳转到身份验证页面
                setTimeout(() => {
                    if (confirm('银行信息提交成功！\n\n接下来需要进行身份验证，包括：\n• 手机短信验证\n• 身份证验证\n• 人脸识别验证\n\n确认继续？')) {
                        showToast('功能开发中，即将跳转到验证页面');
                        setTimeout(() => {
                            window.location.href = 'b2b-bank-account.html';
                        }, 2000);
                    }
                }, 1000);
            }, 2000);
        }

        // Help and agreements
        function showHelp() {
            alert('添加银行账户帮助：\n\n1. 选择您的开户银行\n2. 填写准确的银行卡信息\n3. 确保持卡人姓名与实名认证一致\n4. 完成身份验证后即可使用\n\n如遇问题请联系客服：400-888-8888');
        }

        function showAgreement() {
            alert('银行卡绑定协议\n\n1. 用户同意提供真实有效的银行卡信息\n2. 平台将严格保护用户银行信息安全\n3. 用户可随时解绑银行卡\n4. 如发现虚假信息，平台有权冻结账户\n\n详细条款请访问官网查看完整协议');
        }

        function showPrivacy() {
            alert('隐私政策\n\n1. 银行信息仅用于提现转账功能\n2. 采用银行级SSL加密保护\n3. 不会向第三方泄露用户信息\n4. 用户有权随时删除银行信息\n\n详细政策请访问官网查看完整条款');
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('请填写银行账户信息');
        });
    </script>
</body>
</html>